<!DOCTYPE html>
<html>
<head>
<style>
  .test-div
  {
    width: 100px;
    height: 100px;
    text-align: center;
    background-color: gray;
  }
  .test-canvas
  {
    width: 50px;
    height: 50px;
    backface-visibility: hidden;
  }
</style>
<script>
  /* Function to draw a 50x50 black opaque square with the lower-left quadrant
     red using WebGL */
  function drawRedQuadGL(elementId) {
    var canvas = document.getElementById(elementId);
    var gl = canvas.getContext("webgl");
    if (!gl) {
      throw "Unable to fetch WebGL rendering context for Canvas";
    }
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.SCISSOR_TEST);
    gl.scissor(0, 0, canvas.width/2, canvas.height/2);
    gl.clearColor(1.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }

  /* Function to add a canvas with the specified style with a specified style */
  function addTestCanvas(id, style) {
    document.write("<canvas id=\"" + id + "\" width=50px height=50px class=\"test-canvas\" style=\"" + style + "\"></canvas>");
    document.write("<script>drawRedQuadGL(\"" + id + "\");<\/script>");
  }
</script>
</head>
<body>

<table><tr>

<!-- This test draws a canvas which is facing the screen. -->

<td>
  <div class="test-div">
    <script>addTestCanvas("test0", "");</script>
  </div>
</td>

<!-- This test draws a single-sided canvas facing away from the screen.  This
     should not appear. -->

<td>
  <div class="test-div">
    <script>addTestCanvas("test1", "transform: rotateY(180deg);");</script>
  </div>
</td>

<!-- This test rotates the div away from the screen, but keeps the 
     single-sided canvas facing towards its div.  This should appear. -->

<td>
  <div class="test-div" style="transform: rotateY(180deg)">
    <script>addTestCanvas("test2", "");</script>
  </div>
</td>

</tr><tr>

<!-- This test draws a canvas inside a div which is double-sided and does not 
     face the screen.  This should not appear because preserve-3d is set for
     the parent div. -->

<td>
  <div class="test-div" style="transform: rotateY(180deg); -webkit-transform-style: preserve-3d;">
    <script>addTestCanvas("test3", "");</script>
  </div>
</td>

<!-- This test draws a canvas inside a div which is single-sided and does not
     face the screen.  This should appear because preserve-3d is set for the
     parent div. -->

<td>
  <div class="test-div" style="transform: rotateY(180deg); -webkit-transform-style: preserve-3d; backface-visibility: hidden;">
    <script>addTestCanvas("test4", "transform: rotateY(180deg);");</script>
  </div>
</td>

<!-- This test draws a canvas inside a div which is single-sided and does not
     face the screen.  This should not appear because preserve-3d is not set
     for the parent div.  -->

<td>
  <div class="test-div" style="transform: rotateY(180deg); backface-visibility: hidden;">
    <script>addTestCanvas("test5", "transform: rotateY(180deg);")</script>
  </div>
</td>

</tr></table>

</body>
</html>
